import React, { useState } from 'react';
// 引入 antd 组件
import { NavBar, Space, Toast } from 'antd-mobile';
// 引入路由跳转
import { history } from 'umi';
// 引入 less 样式
import './info.less';

export default function info() {
  const [list, setList] = useState([
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
    {
      img: 'https://img2.baidu.com/it/u=3618236253,1028428296&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1682096400&t=593d10bcb56bce6f64d67bac4b06d8cc',
      title: 'sssss',
      content: 'wwwwww',
    },
  ]);

  // 点击按钮返回
  const back = () => {
    history.go(-1);
  };

  return (
    <div className="info">
      <div className="info-top">
        <NavBar onBack={back}>消息</NavBar>
      </div>
      <div className="info-mid">
        <div className="info-box">
          <div className="info-box-top"></div>
          <h4>交易物流</h4>
        </div>
        <div className="info-box">
          <div className="info-box-top"></div>
          <h4>系统通知</h4>
        </div>
        <div className="info-box">
          <div className="info-box-top"></div>
          <h4>活动预告</h4>
        </div>
      </div>
      <div className="info-list">
        {list.map((item) => {
          return (
            <div className="info-list-item">
              <div className="item-img">
                <img src={item.img} alt="" />
              </div>
              <div className="item-content">
                <h4>{item.title}</h4>
                <p>{item.content}</p>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
